<!-- 洗车提交订单可以选择服务的车辆 -->
<template>
  <view class="my-car">
    <!-- 车辆信息 -->
    <view class="car-info" v-for="item in carInfoList" :key="item.id">
      <!-- 左侧车辆图片 -->
      <view class="car-img">
        <image :src="item.carImg" mode="aspectFill"></image>
      </view>
      <!-- 右侧车辆信息 -->
      <view class="car-info-detail">
        <view class="car-info-item">
          <text>车型: </text>
          <text>{{ item.name }}</text>
        </view>
        <view class="car-info-item">
          <text>车牌: </text>
          <text>{{ item.carNumber }}</text>
        </view>
      </view>
      <!-- 选择按钮 -->
      <view class="select-btn" @click="handleSelect(item)">选择</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { getCarInfoListApi } from "@/api/WashCarApi";
import { onLoad } from "@dcloudio/uni-app";

//定义车辆类型的数据
const carInfoList = ref<CarInfo[]>([]);

//TODO 需要获取当前登录用户的id 这里使用1做默认值
const userId = ref<number>(1);

//函数 发请求获取当前用户的车辆信息
const getCarInfoList = async () => {
  const res = await getCarInfoListApi(userId.value);
  if (res.code === 200) {
    console.log(res.data);
    carInfoList.value = res.data;
    console.log("当前用户的车辆信息:", carInfoList.value);
  }
};

//函数 用户选择车辆后 跳转页面
const handleSelect = (item: CarInfo) => {
  //将选择的车辆id 存储到全局变量中
  uni.setStorageSync("carId", item.id);
  uni.redirectTo({
    url: "/pages/AffirmOrder/index",
  });
};

//页面加载时获取当前用户的车辆信息
onLoad(async () => {
  await getCarInfoList();
});
</script>

<style scoped lang="scss">
.my-car {
  box-sizing: border-box;
  padding: 20rpx;
}
/**车辆样式 */
.car-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 20rpx;

  .car-img {
    width: 250rpx;
    height: 250rpx;
    image {
      border-radius: 125rpx;
      width: 100%;
      height: 100%;
    }
  }
  .car-info-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30rpx;
  }
  .select-btn {
    width: 150rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    color: #fff;
    background-color: #157efb;
    border-radius: 30rpx;
  }
}
</style>
